<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>UEditor 显示页面</title>
    <!--百度编辑器--->
    <script type="text/javascript" src="ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="ueditor/ueditor.all.js"></script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" src="ueditor/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<div>
    <div>百度编辑器</div>
    <div>
        <textarea id="editor" name="editor" style="width:100%; height: 400px;" placeholder="ggg"></textarea>
    </div>
</div>
<hr/>

<script>
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例

    var ue = UE.getEditor('editor');
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function (action) {
        if (action == 'uploadimage' || action == 'uploadfile'|| action == 'uploadvideo') {
            return 'http://localhost/ueditor/upload';
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    };
</script>

<script type="text/javascript">
    window.onload=function(){
        var ueObj = null;	//编辑器实例
        var ueDom = document.getElementById('editor');
        //添加事件监听
        ueDom.addEventListener("focus", function(){
            if(ueObj) return ;	//如果编辑器已经实例化，直接返回
            ueObj = UE.getEditor('editor', {focus:true});	//取得ueditor实例
            ueObj.addListener("blur", function(){	//输入框失去焦点时，如果内容为空，销毁ueditor
                if(ueObj.getContent().length == 0) {
                    UE.getEditor('editor').destroy();
                    ueObj= null;
                }
            })
        })
    }
</script>

</body>
</html>